<!DOCTYPE html>
<html>
<head>

  <!-- meta tags -->
  <meta charset="utf-8">
  <meta name="keywords" content="bootstrap 4, premium, multipurpose, ecommerce, html5, CSS" />
  <meta name="description" content="Bootstrap 4 Landing Page Template" />
  <meta name="author" content="www.themesground.com" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Title -->
  <title></title>

  <!-- Favicon Icon -->
  <link rel="shortcut icon" href="../assets/images/pagepig.ico" />

  <!-- inject css start -->

  <link href="../assets/css/theme-plugin.css" rel="stylesheet" />
  <link href="../assets/css/theme.min.css" rel="stylesheet" />

  <!-- inject css end -->

</head>

<body>
<!-- 引入头部 -->
<div class="head"></div>
<!-- page wrapper start -->

<div class="page-wrapper">



  <!-- preloader start -->

  <div id="ht-preloader">
    <div class="loader clear-loader">
      <img class="img-fluid" src="../assets/images/loader.gif" alt="">
    </div>
  </div>

  <!-- preloader end -->


  <!-- page wrapper start -->

  <!--hero section start-->
  <section class="bg-light py-3">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-md-6">
          <h1 class="h2 mb-0">佩奇牧场·结算页面</h1>
        </div>
        <div class="col-md-6 mt-3 mt-md-0">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-md-end bg-transparent p-0 m-0">
              <li class="breadcrumb-item"><a class="link-title" href="http://127.0.0.1:8888/page/index.html">主页</a> </li>
              <li class="breadcrumb-item"><a class="link-title" href="http://127.0.0.1:8888/page/shopping-cart.html">购物</a></li>
              <li class="breadcrumb-item active text-primary" aria-current="page">结算页</li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
  </section>


  <div class="container">
    <h6 class="mb-3 font-w-6">收货人信息<a href="#">        新增地址</a></small></h6>
    <div class="form-group">
      <div class="custom-control custom-radio" id="userAddr">加载中，请稍等.....
      </div>
    </div>
  </div>

  <div class="checkout-page" style="padding-top: 5px;padding-bottom: 10px;">
    <div class="container">
      <div class="row" >
        <div class="col-lg-5 col-md-12 mt-5 mt-lg-0 ">
          <div class="mb-7">
            <h6 class="mb-3 font-w-6">核对订单信息</h6>
            <div class="col-lg-0 pl-lg-0 mt-18 mt-lg-0" id="itemcartall" >加载中，请稍等.....
            </div>
          </div>

          <div class="cart-detail my-5">
            <h6 class="mb-3 font-w-6">支付方式</h6>
            <div class="form-group">
              <div class="custom-control custom-radio">
                <input type="radio" id="alipay" name="payType" class="custom-control-input">
                <label class="custom-control-label" for="alipay">支付宝付款</label>
              </div>
            </div>


            <div id="orderAll" style=""></div>
          </div>


          </div>
          <h2 id="checkType"  style="color: maroon;font-weight: bold"></h2>
          <button class="btn btn-primary btn-animated btn-block" onclick="orderAndPay()">付款</button>
        </div>
      </div>
    </div>
  </div>

<!--back-to-top start-->

<div class="scroll-top"><a class="smoothscroll" href="#top"><i class="las la-angle-up"></i></a></div>

<!--back-to-top end-->
<div class="footer"></div>
<!-- inject js start -->

<script src="../assets/js/jquery-3.5.1.min.js"></script>
<script src="../assets/js/popper.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<!--<script src="../assets/js/owl.carousel.min.js"></script>-->
<script src="../assets/js/light-slider.js"></script>
<script src="../assets/js/parallax.js"></script>
<script src="../assets/js/magnific-popup.min.js"></script>
<script src="../assets/js/jquery.countdown.min.js"></script>
<script src="../assets/js/jquery.dd.min.js"></script>
<script src="../assets/js/validator.js"></script>
<script src="../assets/js/wow.js"></script>
<script src="../assets/js/theme-script.js"></script>
<!-- inject js end -->
<script>
  $(function() {
    $.ajax({
      url: "/order/showAddr",
      type: "get",
      contentType: "application/x-www-form-urlencoded; charset=utf-8",
      dataType: "json",
      success: function (data) {
        if (data.data == null) {
          let userAddrNull = `无收货地址,<a href="my-account.html">点击去添加</a>`
          $("#userAddr").append(userAddrNull);
        } else {
          $("#userAddr").empty();
          /*console.log(data);*/
          let userAddr = data.data;
          for (let i = 0; i < userAddr.length; i++) {
            let append = `
            <div class="form-group" >
            <input type = "radio" id = "${userAddr[i].addrId}" name = "addrName" class="custom-control-input">
            <label class="custom-control-label" for="${userAddr[i].addrId}">
                ${userAddr[i].receiverName}&nbsp;&nbsp;&nbsp;&nbsp;
                ${userAddr[i].receiverPhone}&nbsp;&nbsp;&nbsp;&nbsp;
                ${userAddr[i].receiverProvince}
                ${userAddr[i].receiverCity}
                ${userAddr[i].receiverRegion}
                ${userAddr[i].receiverAddress}
                </label>
            </div>
          `;
            $("#userAddr").append(append);

          }
        }


      }
    });

    /*-第二个ajax-*/
    $.ajax({
      url: "/page/cartShow",
      type: "get",
      async:true,
      contentType: "application/x-www-form-urlencoded; charset=utf-8",
      dataType: "json",
      /* data:{userId:1}, */
      success:function (data){
        $("#itemcartall").empty()
        //console.log(data.data);
        let itemList = data.data;
        var AllItemPrice = 0;
        let allItemNum=0;
        let freightAmount=0;
        for(let i=0;i<itemList.length;i++) {
          let itemPrice = itemList[i].itemPrice / 100;
          let oneItemPrice = (itemList[i].itemPrice * itemList[i].num) / 100;
          AllItemPrice += oneItemPrice;
          allItemNum += (itemList[i].num);
          let tr = `
            <in> <td>
            <input id="OrderItemId" type="hidden" name="orderItemId" value="${itemList[i].cartId}">
                  <div class="cart-thumb media align-items-center">
                    <a href="#"><img class="img-fluid" src="${itemList[i].itemImage}" alt=""></a>
                    <div class="media-body ml-3">
                      <div class="product-title mb-2">
                      <a class="link-title" href="#">${itemList[i].itemTitle}</a></div>
                    </div>
                    <span class="media-body ml-1">${itemPrice} X ${itemList[i].num}</span>
                    <span class="media-body ml-1" >${oneItemPrice}元</span>
                  </div>
              </td>
              </div>`;
          $("#itemcartall").append(tr);
        }
          if(AllItemPrice>=49){
           freightAmount=0;
          }else{
           freightAmount=5;
          }
          let pay=AllItemPrice+freightAmount;
          let allPrice=`
          <div>
          <small>运&nbsp;&nbsp;&nbsp;&nbsp;费: ${freightAmount}元</small><br>
          <small id="orderMoney"  value="${AllItemPrice.toFixed(2)}" >订单金额:${AllItemPrice.toFixed(2)}</small><br>
           <small>优惠金额:0元</small><br>
           <small>商品总数量:${allItemNum}件</small><br>
           <h6>实际支付金额: ${pay.toFixed(2)}元</h6>
           </div>`;
          $("#orderAll").append(allPrice);
        }






    })
  });



  function orderAndPay(){
    let addrId=parseInt($('input:radio[name="addrName"]:checked').attr('id')) ;
    let payType=$('input:radio[name="payType"]:checked').attr('id');
    let orderM = parseFloat(document.getElementById("orderMoney").getAttribute("value"));
    let totalAmount=parseInt(orderM*100);
    var totalPay=orderM;

    var orderItems=[];
    for(i=0;i<document.getElementsByName("orderItemId").length;i++){
      var d = document.getElementsByName("orderItemId")[i].value;
      orderItems.push(d);
    }
    //console.log(itemId);
    //console.log(orderMoney)
    //console.log(typeof orderMoney)


    if(addrId==null){
      //$("#checkType").empty().append("请选择收货人信息");
      alert("请选择收货人信息");
    }else if(payType==null){
      //$("#checkType").empty().append("请选择支付方式");
      alert("请选择支付方式");
    }else{
      $("#checkType").empty();
      $.ajax({
        url: "/order/saveOrder",
        type: "post",
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        dataType: "json",
        data:{totalAmount:totalAmount,addrId:addrId,payType:payType},
        success:function (data){
          if(totalAmount<4900){
            totalPay+=5;
          }
          var payAmountAlipay=totalPay;
          var orderId=data.data.orderId;
          if (data.status==200){
           window.location.href = 'http://127.0.0.1:8893/alipay?orderId='+orderId+'&&payAmount='+payAmountAlipay;
          }
        }
      })
    }
  }

</script>
<script type="text/javascript">
  //在js中引入头部和尾部
  $(document).ready(function () {
    $('.head').load('head.html');
    $('.footer').load('footer.html');
  });
</script>

</body>
</html>
